<template>
  <div class="club-manager">
    <div class="buttons">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="jump({name: 'club.manager.create'})"
        v-if="auth('club.manager.create')"
        size="small">添加</el-button>
    </div>
    <template>
      <el-table
        :data="items"
        style="width: 100%">
        <el-table-column
          label="Logo">
          <template slot-scope="scope">
            <img :src="imageUrl + scope.row.logo" style="width: 50px;height: 50px">
          </template>
        </el-table-column>
        <el-table-column
          label="名称">
          <template slot-scope="scope">
            {{scope.row.email}}
          </template>
        </el-table-column>
        <el-table-column
          label="手机号码">
          <template slot-scope="scope">
            {{scope.row.mobile}}
          </template>
        </el-table-column>
        <el-table-column
          label="邮箱">
          <template slot-scope="scope">
            {{scope.row.email}}
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
            <el-tag v-if="scope.row.status === 2" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="little"
              v-if="auth('club.manager.update')"
              type="default">编辑</el-button>
            <el-button
              size="little"
              v-if="auth('club.child.account.items')"
              type="success">子账户</el-button>
            <el-button
              size="little"
              @click="changeStatus(2, scope.row.uuid)"
              v-if="scope.row.status === 1 && auth('club.disabled')"
              type="danger">禁用</el-button>
            <el-button
              size="little"
              @click="changeStatus(1, scope.row.uuid)"
              v-if="scope.row.status === 2 && auth('club.enable')"
              type="success">解禁</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pages">
      <el-pagination
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import config from '@config'
export default {
  data () {
    return {
      page: 1,
      size: 50,
      total: 0,
      items: [],
      imageUrl: config.imageUrl
    }
  },
  $route (route) {
    if (route.params.page) {
      this.page = Number(route.params.page)
    }
    this.getItems()
  },
  methods: {
    /**
     *  @purpose 修改俱乐部状态
     */
    changeStatus (status, uuid) {
      this.showLoading()
      this.$confirm('确定要操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: status === 3 ? 'warning' : 'notice'
      }).then(() => {
        this.showLoading()
        this
          .$api
          .club
          .changeStatus(status, uuid)
          .then(r => {
            this.toast('操作成功')
            this.getItems()
          })
      }).catch(() => {})
    },
    /**
     *  翻页回调
     */
    currentPage (page) {
      this.jump({
        name: 'club.manager.list',
        params: {
          page: page
        }
      })
    },
    getItems () {
      this.showLoading()
      this
        .$api
        .club
        .items(this.page, this.size)
        .then(r => {
          this.items = r.list
          this.total = r.total
        })
    }
  },
  created () {
    if (this.$route.params.page) {
      this.page = Number(this.$route.params.page)
    }
    this.getItems()
  }
}
</script>
<style scoped></style>
